{extend name="layout" /}
{block name="css"}
<!-- ================== BEGIN PAGE LEVEL STYLE ================== -->
<link href="artisan_plugins/DataTables/css/data-table.css" rel="stylesheet"/>
<link href="artisan_plugins/switchery/switchery.min.css" rel="stylesheet"/>
<link href="artisan_plugins/powerange/powerange.min.css" rel="stylesheet"/>
<!-- ================== END PAGE LEVEL STYLE ================== -->
{/block}
{block name="content"}
<div id="content" class="content">
    <!-- begin breadcrumb -->
    <ol class="breadcrumb pull-right">
        <li><a href="{:url('Admin/Index/index')}">首页</a></li>
        <li><a href="javascript:;">系统管理</a></li>
        <li class="active">测点定义</li>
    </ol>
    <!-- end breadcrumb -->
    <!-- begin page-header -->
    <h1 class="page-header">测点定义
        <small></small>
    </h1>
    <!-- end page-header -->
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-inverse" data-sortable-id="index-2">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default"
                           data-click="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success"
                           data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning"
                           data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger"
                           data-click="panel-remove"><i class="fa fa-times"></i></a>
                    </div>
                    <h4 class="panel-title">地区信息</h4>
                </div>
                <div class="panel-body">
                    <div class="row select-container">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <select class="form-control" name="" id="PR">
                                        <option>--请选择--</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label" for="PR"
                                       style="padding-left: 0;text-align: left">省</label>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <select class="form-control" name="" id="City">
                                        <option>--请选择--</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label" for="City"
                                       style="padding-left: 0;text-align: left">市</label>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-10">
                                    <select class="form-control" name="" id="Town">
                                        <option>--请选择--</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label" for="Town"
                                       style="padding-left: 0;text-align: left">县</label>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-inverse" data-sortable-id="index-1">
                <div class="panel-heading">
                    <div class="panel-heading-btn">
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default"
                           data-click="panel-expand"><i class="fa fa-expand"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success"
                           data-click="panel-reload"><i class="fa fa-repeat"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning"
                           data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                        <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger"
                           data-click="panel-remove"><i class="fa fa-times"></i></a>
                    </div>
                    <h4 class="panel-title">工作室信息</h4>
                </div>
                <div class="panel-body">
                    <div class="row select-container">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="Shop">车 间</label>
                                <div class="col-sm-6">
                                    <select class="form-control" name="" id="Shop">

                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <div class="btn-group">
                                        <button class="btn btn-default">增加</button>
                                        <button class="btn btn-default">编辑</button>
                                        <button class="btn btn-default">删除</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="Part">工 段</label>
                                <div class="col-sm-6">
                                    <select class="form-control" name="" id="Part">

                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <div class="btn-group">
                                        <button class="btn btn-default">增加</button>
                                        <button class="btn btn-default">编辑</button>
                                        <button class="btn btn-default">删除</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="Room">电气室</label>
                                <div class="col-sm-6">
                                    <select class="form-control" name="" id="Room">

                                    </select>
                                </div>
                                <div class="col-sm-4">
                                    <div class="btn-group">
                                        <button class="btn btn-default">增加</button>
                                        <button class="btn btn-default">编辑</button>
                                        <button class="btn btn-default">删除</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--已定义电气回路列表start-->
    <div class="panel panel-inverse">
        <div class="panel-heading">
            <div class="panel-heading-btn">
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i
                        class="fa fa-expand"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i
                        class="fa fa-repeat"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i
                        class="fa fa-minus"></i></a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i
                        class="fa fa-times"></i></a>
            </div>
            <h4 class="panel-title">已定义电气回路</h4>
        </div>

        <div class="panel-body">
            <a name="addLoop" href='#edit-modal' class="btn btn-inverse" data-toggle='modal'>
                <div class="glyphicon glyphicon-plus"></div>新增
            </a>
            <div class="table-responsive">
                <table id="defined_loop" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                    <tr>
                        <td>测点ID</td>
                        <td>回路名称</td>
                        <td>操作</td>
                    </tr>
                    </thead>

                    <tbody>

                    </tbody>
                </table>
                <!--查看弹出框start-->
                <div class="modal modal-message fade" id="get-modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    ×
                                </button>
                                <h4 class="modal-title">测点信息</h4>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered nowrap" width="100%">
                                        <thead>
                                        <tr>
                                            <th colspan="1">测点ID</th>
                                            <th colspan="2"><span name="monitor_id"></span></th>
                                        </tr>
                                        <tr>
                                            <th colspan="1">电气回路名称</th>
                                            <th colspan="2">
                                                <span name="loop_name"></span>
                                            </th>
                                        </tr>
                                        <tr>
                                            <th colspan="1">检测指标</th>
                                            <th colspan="1">额定值</th>
                                            <th colspan="1">传感器</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        <tr>
                                            <td>功率</td>
                                            <td><span name="power"></span></td>
                                            <td><span name="sen_power"></span></td>
                                        </tr>
                                        <tr>
                                            <td>电压</td>
                                            <td><span name="voltage"></span></td>
                                            <td><span name="sen_voltage"></span></td>
                                        </tr>
                                        <tr>
                                            <td>A相电流</td>
                                            <td><span name="current_a"></span></td>
                                            <td><span name="sen_current_a"></span></td>
                                        </tr>
                                        <tr>
                                            <td>B相电流</td>
                                            <td><span name="current_b"></span></td>
                                            <td><span name="sen_current_b"></span></td>
                                        </tr>
                                        <tr>
                                            <td>C相电流</td>
                                            <td><span name="current_c"></span></td>
                                            <td><span name="sen_current_c"></span></td>
                                        </tr>
                                        <tr>
                                            <td>剩余电流</td>
                                            <td><span name="resi_current"></span></td>
                                            <td><span name="sen_resi_current"></span></td>
                                        </tr>
                                        <tr>
                                            <td>电缆温度</td>
                                            <td><span name="cable_temp"></span></td>
                                            <td><span name="sen_cable_temp"></span></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="javascript:;" class="btn btn-sm btn-white"
                                   data-dismiss="modal">关闭</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--查看弹出框end-->
                <!--编辑弹出框start-->
                <div class="modal modal-message fade" id="edit-modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    ×
                                </button>
                                <h4 class="modal-title">测点信息</h4>
                            </div>
                            <div class="modal-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered nowrap" width="100%">
                                        <thead>
                                        <tr>
                                            <th colspan="1">测点ID</th>
                                            <th colspan="2">
                                                <input class="form-control input-sm" name="monitor_id">
                                            </th>
                                        </tr>
                                        <tr>
                                            <th colspan="1">电气回路名称</th>
                                            <th colspan="2">
                                                <input class="form-control input-sm" name="loop_name">
                                            </th>
                                        </tr>
                                        <tr>
                                            <th colspan="1">检测指标</th>
                                            <th colspan="1">额定值</th>
                                            <th colspan="1">传感器</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        <tr>
                                            <td>功率</td>
                                            <td><input class="form-control input-sm" name="power"></td>
                                            <td><input class="form-control input-sm" name="sen_power"></td>
                                        </tr>
                                        <tr>
                                            <td>电压</td>
                                            <td><input class="form-control input-sm" name="voltage"></td>
                                            <td><input class="form-control input-sm" name="sen_voltage"></td>
                                        </tr>
                                        <tr>
                                            <td>A相电流</td>
                                            <td><input class="form-control input-sm" name="current_a"></td>
                                            <td><input class="form-control input-sm" name="sen_current_a"></td>
                                        </tr>
                                        <tr>
                                            <td>B相电流</td>
                                            <td><input class="form-control input-sm" name="current_b"></td>
                                            <td><input class="form-control input-sm" name="sen_current_b"></td>
                                        </tr>
                                        <tr>
                                            <td>C相电流</td>
                                            <td><input class="form-control input-sm" name="current_c"></td>
                                            <td><input class="form-control input-sm" name="sen_current_c"></td>
                                        </tr>
                                        <tr>
                                            <td>剩余电流</td>
                                            <td><input class="form-control input-sm" name="resi_current"></td>
                                            <td><input class="form-control input-sm" name="sen_resi_current"></td>
                                        </tr>
                                        <tr>
                                            <td>电缆温度</td>
                                            <td><input class="form-control input-sm" name="cable_temp"></td>
                                            <td><input class="form-control input-sm" name="sen_cable_temp"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="javascript:;" class="btn btn-sm btn-white"
                                   data-dismiss="modal">关闭</a>
                                <a id="save" name="save" class="btn btn-sm btn-primary">保存</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--编辑弹出框end-->
                <!-- 删除弹出框start -->
                <div class="modal fade" id="delete-modal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-hidden="true">×
                                </button>
                                <h4 class="modal-title">警告</h4>
                            </div>
                            <div class="modal-body">
                                <div class="alert alert-danger m-b-0">
                                    <h4><i class="fa fa-info-circle"></i> 是否确认删除当前用户？</h4>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="javascript:;" class="btn btn-sm btn-white"
                                   data-dismiss="modal">关闭</a>
                                <a name="delete_monitor" class="btn btn-sm btn-danger"
                                   data-dismiss="modal">删除</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 删除弹出框end -->
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="artisan_plugins/DataTables/js/jquery.dataTables.js"></script>
<script src="artisan_plugins/DataTables/js/dataTables.tableTools.js"></script>
<script src="artisan_js/table-manage-tabletools.demo.min.js"></script>
<script src="artisan_plugins/switchery/switchery.min.js"></script>
<script src="artisan_plugins/powerange/powerange.min.js"></script>
<script src="artisan_js/form-slider-switcher.demo.min.js"></script>
<script src="artisan_js/apps.min.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<script>
    $(document).ready(function () {
        TableManageTableTools.init();
        //表格定义
        var table = $('#defined_loop').DataTable({
            'bLengthChange': false,
            //这样配置后，即可用DT的API来访问表格数据
            ajax:{
                'url':'/admin/system/renderLoop'
            },
            columns: [
                {data: "monitor_id"},
                {data: "loop_name"},
                {data: "oprator"}
            ],
            "aoColumnDefs": [
                {
                    "targets": -1,
                    "bSortable": false,
                    "data": null,
                    "render": function (data, type, row, meta) {
                        //渲染 添加操作
                        var html = "<a name='getLoop' href='#get-modal' data-toggle='modal'>"
                            + "<i class='fa fa-folder-open'>查看</i></a>|"
                            + "<a name='editLoop' href='#edit-modal' data-toggle='modal'>"
                            + "<i class='fa fa-pencil'>编辑</i></a>|"
                            + "<a name='delete' href='#delete-modal' data-toggle='modal'>"
                            + "<i class='fa fa-trash-o'>删除</i></a>";
                        return html;
                    }
                }
            ]
        });
        //新增事件
        $("a[name='addLoop']").click(function () {
            $("#edit-modal input[name='monitor_id']").attr("readonly",false);
            $("#edit-modal input").each(function () {
                $(this).val(null);
            });
            $('#save').attr("name","save");

        });
        $('#edit-modal').on('click', "a[name='save']", function (e) {
            e.stopPropagation();
            var monitorInfo = {};
            var sensorInfo = {};
            $('#edit-modal input').each(function () {
                if ($(this).attr('name') == 'monitor_id' || $(this).attr('name') == 'loop_name') {
                    if ($(this).attr('name') == 'monitor_id') {
                        monitorInfo['monitor_id'] = $(this).val();
                        sensorInfo['monitor_id'] = $(this).val();
                    } else {
                        monitorInfo['loop_name'] = $(this).val();
//                        sensorInfo['loop_name'] = $(this).val();
                    }
                } else {
                    if ($(this).attr('name').split('_')[0] == 'sen') {
                        sensorInfo[$(this).attr('name')] = $(this).val();
                    } else {
                        monitorInfo[$(this).attr('name')] = $(this).val();
                    }
                }
            });
            $.ajax({
                type: 'post',
                url: '/admin/system/addLoop',
                data: {monitorInfo: monitorInfo, sensorInfo: sensorInfo},
                success: function (res) {
                    if (res) {
                        table.row.add({'monitor_id':monitorInfo['monitor_id'],'loop_name':monitorInfo['monitor_id']}).draw();
                        $('#edit-modal').modal('hide');
                    } else {
                        alert("新增失败");
                    }
                }
            });
        });
        //删除事件
        $(function () {
            var row;
            $('#defined_loop tbody').on('click', "a[name='delete']", function () {
                row = $('#defined_loop').DataTable().row($(this).parent().parent('tr'));
            });
            $('#delete-modal').on('click', "a[name='delete_monitor']", function (e) {
                e.stopPropagation();     //同类型阻止冒泡
                var id = row.data()['monitor_id'];
                $.ajax({
                    type: 'post',
                    url: '/admin/system/deleteDefinedLoop',
                    data: {id: id},
                    success: function (res) {
                        console.log(res);
                        row.remove().draw(false);
                    }
                });
            });
        });
        //查看事件
        $('#defined_loop tbody').on('click', "a[name='getLoop']", function () {
            row = $('#defined_loop').DataTable().row($(this).parent().parent('tr'));
            var id = row.data()['monitor_id'];
            $.ajax({
                type: 'post',
                url: '/admin/system/viewDefinedLoop',
                data: {id: id},
                success: function (res) {
                    var info = $.extend({}, res[0], res[1]);
                    $.each(info, function (key, value) {
                        $("#get-modal span[name=" + key + "]").html(value);
                    })
                }
            });
        });
        // 编辑事件
        $('#defined_loop tbody').on('click', "a[name='editLoop']", function () {
            $('#save').attr('name','save-edit');
            $("#edit-modal input[name='monitor_id']").attr("readonly",true);
            row = $('#defined_loop').DataTable().row($(this).parent().parent('tr'));
            var id = row.data()['monitor_id'];
            $.ajax({
                type: 'post',
                url: '/admin/system/viewDefinedLoop',
                data: {id: id},
                success: function (res) {
                    var info = $.extend({}, res[0], res[1]);
                    $.each(info, function (key, value) {
                        $("#edit-modal input[name=" + key + "]").val(value);
                    })
                }
            });
        });
        $('#edit-modal').on('click', "a[name='save-edit']", function () {
            var monitorInfo = {};
            var sensorInfo = {};
            $('#edit-modal input').each(function () {
                if ($(this).attr('name') == 'monitor_id' || $(this).attr('name') == 'loop_name') {
                    if ($(this).attr('name') == 'monitor_id') {
                        monitorInfo['monitor_id'] = $(this).val();
                        sensorInfo['monitor_id'] = $(this).val();
                    } else {
                        monitorInfo['loop_name'] = $(this).val();
//                        sensorInfo['loop_name'] = $(this).val();
                    }
                } else {
                    if ($(this).attr('name').split('_')[0] == 'sen') {
                        sensorInfo[$(this).attr('name')] = $(this).val();
                    } else {
                        monitorInfo[$(this).attr('name')] = $(this).val();
                    }
                }
            });
            $.ajax({
                type: 'post',
                url: '/admin/system/editDefinedLoop',
                data: {monitorInfo: monitorInfo, sensorInfo: sensorInfo},
                success: function (res) {
                    if (res) {
                        table.ajax.reload();
                        $('#edit-modal').modal('hide');
                    } else {
                        alert("编辑失败");
                    }
                }
            });

        });

        //返回表格数据
        function packagingTableData(data) {
            var table_data = [];
            var table = {};
            for (i = 0, len = data.length; i < len; i++) {
                var tempobj = {};
                tempobj.monitor_id = data[i].monitor_id;
                tempobj.loop_name = data[i].loop_name;
                tempobj.power = data[i].power;
                tempobj.sensor = "传感器";
                tempobj.oprator = "";
                table_data.push(JSON.parse(JSON.stringify(tempobj)));
            }
            table['draw'] = 1;
            table['recordsTotal'] = 5;
            table['data'] = table_data;
            console.log(table);
            return table.data;
        }

    });
</script>
{/block}